<!-- 商品详情-——【产品参数、版本更新、用户评价】 等  -->
<template>
	<view>
		<!-- 联系我们图片 -->
		<block v-if="typeId == 1 && rightText">
			<view class="v-contact-us flex" @click="toRight()">
				<image :src="contactImg ? contactImg : '/static/detailImg.png'"></image>
			</view>
		</block>
		<view class="v-min-height parametersContainer" :class="rightText ? 'v-parameters' : 'v-parameters2'"
			v-if="typeList.length > 0">
			<block v-for="(i, j) in typeList" :key="j">
				<view class="flex-align-center v-product-parameters" v-if="i.content">
					<!-- :style="{ height: heightSystemss + 'px' }" -->
					<view class="flex-align-center v-text">
						<text style="max-width: 200rpx;" :style="{ 'letter-spacing': 0+ 'px' }">{{ i.name }}</text>
						：
					</view>
					<view style="color: #666666;">{{ i.content }}</view>
				</view>
			</block>
		</view>



		<!-- <view class="v-margin">
			<sunui-navbar activeFontWeight="400" :items="tabList" lineHeight="56rpx" :isCenter="true"
				:currentIndex="navIndex" padding="20rpx" :size="180" activeLineBg="#294D7D" activeFontSize="32rpx"
				fontSize="32rpx" color="#8F8F8F" textAlign="center" activeLineWidth="50%" activeDirection="center"
				activeLineHeight="8rpx" @change="getChange"></sunui-navbar>
		</view> -->
		<!-- 产品参数 -->
		<block v-if="navIndex == 0">
			<view class="v-padding-center">
				<uv-parse class="" :content="richText" :selectable="true"></uv-parse>
			</view>

			<!-- <rich-parser
				:html="richText"
				domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
				lazy-load
				ref="article"
				selectable
				show-with-animation
				use-anchor
				lazyLoad="true"
			></rich-parser> -->
			<mescroll-empty v-if="!richText" :option="optEmpty"></mescroll-empty>
		</block>
		<!-- 版本更新 -->
		<block v-if="navIndex == 1">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
				@up="upCallback" :height="200">
				<view class="v-padding-top v-min-height">
					<view class="v-version-update" v-for="(i, j) in list" :key="j">
						<view class="v-time">
							{{ i.create_time.split(' ')[0] }}
							<text>{{ i.create_time.split(' ')[1] }}</text>
						</view>
						<view class="v-version-number">{{ i.title }}</view>
						<view class="v-optimization">{{ i.desc }}</view>
					</view>
				</view>
			</mescroll-body>
		</block>
		<!-- 用户评价 -->
		<block v-if="navIndex == 2">
			<view class="evaluate margin-top_10rpx ">
				<view class="flex-between">
					<view class="font-weight_bold">
						评价(111)
					</view>
					<view class="flex">
						<view class="" style="color: #999999;" @click="goEvaluateList()">
							查看全部
						</view>
						<view class="">
							<uni-icons color="#999999" type="right" size="20"></uni-icons>
						</view>
					</view>
				</view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
					@up="upCallback" :height="150">
					<view class="v-evaluate " v-for="(i, j) in list" :key="j">
						<!-- <view class="flex-align-center v-evaluate-top">
							<image :src="i.avatar"></image>
							<view class="flex-columns">
								<view class="flex-between" style="width: 580rpx;">
									<view>{{ i.nickname }}</view>

									<view class="flex-align-center">

										<uni-rate :readonly="true" :value="i.score" :max="5" size="18"
											activeColor="#FF5F4E" margin="5" />
										<view class="v-star-score">{{ Number(i.score).toFixed(1) }}</view>
									</view>
								</view>
								<view class="flex-align-center v-data-time">{{ i.create_time }}</view>
							</view>
						</view> -->


						<view class="flex-between margin-top_20rpx">
							<view class="flex-start-center">
								<image class="imgIcon" :src="i.avatar" mode=""></image>
								<view class="flex-columns">
									<view class="">
										{{ i.nickname }}
									</view>
									<view class="" style="color: #666666;">
										{{ i.create_time }}
									</view>
								</view>
							</view>

							<view class="">
								<uni-rate :readonly="true" :value="i.score" :max="5" size="18" activeColor="#FF5F4E"
									margin="5" />
							</view>
						</view>
						<view class="margin-top_30rpx ">
							<text style="color: #666666;" class="font-size_26rpx font-overflow4">
								{{ i.context }}
							</text>
						</view>
                       <view class="img-video" v-if="i.img" style="display: flex;">
                       	<view class="box" v-for="items in i.img" @click="showBigImg(items, i.img)" :key="items">
                       		<image mode="aspectFill" :src="items" class="imhasass border10"></image>
                       	</view>
                       </view>
                       <!-- 后台回复：仅一条 -->
                       <view class="v-reply" v-if="i.reply_context">
                       	<text>回复</text>
                       	<view>{{ i.reply_context }}</view>
                       </view>
					</view>

				</mescroll-body>
			</view>
		</block>
		<block v-if="softwareDesc">
			<view class="v-height"></view>
			<!-- 软件声明 -->
			<view class="v-product-introduction">
				<view>软件声明</view> 
			</view>
			<view class="v-padding-center">
				<uv-parse :content="softwareDesc" :selectable="true"></uv-parse>
				<!-- <rich-parser
					:html="softwareDesc"
					domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
					lazy-load
					ref="article"
					selectable
					show-with-animation
					use-anchor
					lazyLoad="true"
				></rich-parser> -->
			</view>
		</block>
		<!-- 流量主广告 -->
		<view class="v-bottom-av">
			<advertisement :adId="system.foodsgg_app_id" :img="system.foodsgg_img" :picType="system.foodsgg_type">
			</advertisement>
		</view>
		<view class="v-height2">
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'type',
		props: ['typeList', 'ids', 'richText', 'softwareDesc', 'typeId'],
		data() {
			return {
				system: uni.getStorageSync('system'),
				contactImg: uni.getStorageSync('system').foods_desc_img,
				rightText: uni.getStorageSync('system').right_text,
				optEmpty: {
					tip: '暂无产品参数 ~ '
				},
				list: [],
				navIndex: 0,
				tabList: [{
						name: '产品介绍'
					},
					{
						name: '版本更新'
					},
					{
						// name: '用户评价 99+'
						name: '用户评价'
					}
				]
			};
		},
		methods: {
			// 跳转右边的“联系我们”
			toRight() {
				this.$sun.navGo('/pages/index/indexRight');
			},
			// 点击图片方法
			showBigImg(src, srclist) {
				uni.previewImage({
					current: src,
					urls: srclist
				});
				console.log('current', current, 'urls', urls);
			},
			getChange(e) {
				this.navIndex = e;
			},
			async upCallback(scroll) {
				console.log('this.navIndex*********', this.navIndex);
				// 查询产品版本记录
				if (this.navIndex == 1) {
					const result = await this.$http.get({
						url: this.$api.getVersionList,
						data: {
							page: scroll.num,
							limit: 10,
							// 产品id
							goods_id: this.ids
						}
					});
					if (result.code == 0) {
						this.mescroll.endByPage(result.data.list.length, result.totalPage);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
						this.mescroll.optUp.empty = Object.assign(this.mescroll.optUp.empty, {
							tip: '暂无版本更新~'
						});
					}
				}
				// 查询产品评论
				if (this.navIndex == 2) {
					const result = await this.$http.get({
						url: this.$api.getfoodsComment,
						data: {
							page: scroll.num,
							limit: 10,
							// 产品id
							id: this.ids
						}
					});
					if (result.code == 0) {
						this.mescroll.endByPage(result.data.list.length, result.totalPage);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
						this.mescroll.optUp.empty = Object.assign(this.mescroll.optUp.empty, {
							tip: '暂无评价~'
						});
						// result.data.total (总评论数)
					}
				}
			}
		}
	};
</script>

<style lang="less">
	.v-margin {
		margin: 24rpx 0 14rpx;
	}

	.v-min-height {
		// min-height: 550rpx;
	}

	.parametersContainer {


		border-radius: 20rpx;

		background: rgb(255, 255, 255);
		margin: 0rpx 20rpx 10rpx;
	}

	//联系我们
	.v-contact-us {
		margin-top: 16rpx;

		image {
			width: 710rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}
	}

	// 产品参数
	.v-parameters,
	.v-parameters2 {
		border-top: 2rpx solid #f7f7f7;

		.v-product-parameters {
			margin-bottom: 40rpx;

			.v-text {
				min-width: 150rpx;
				// text-align-last: justify;
			}

			view {
				color: #8f8f8f;
			}
		}
	}

	.v-parameters {
		padding: 44rpx 20rpx 10rpx;
	}

	.v-parameters2 {
		padding: 70rpx 20rpx 30rpx;
	}

	// 版本更新
	.v-padding-top {
		margin-top: 42rpx;

		.v-version-update {
			padding: 0 20rpx 38rpx;

			.v-time {
				margin-bottom: 12rpx;

				text {
					margin-left: 12rpx;
					color: #8f8f8f;
				}
			}

			.v-version-number {
				background: #e1ecff;
				color: #294d7d;
				padding: 20rpx 14rpx;
			}

			.v-optimization {
				font-size: 24rpx;
				padding: 26rpx 14rpx 50rpx;
				background: #ffffff;
				border: 2rpx solid #f5f5f5;
			}
		}
	}

	.evaluate {
		margin: 22rpx 22rpx;
		// height: 266rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		background: rgb(255, 255, 255);

		.imgIcon {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}

	// 用户评价
	.v-evaluate {
		// padding: 40rpx 24rpx 32rpx;
		border-top: 2rpx solid #f7f7f7;

		.v-evaluate-top {
			margin-bottom: 50rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			/* text {
			margin-left: 10rpx;
		} */
			.v-data-time {
				margin-top: 26rpx;
				color: #8f8f8f;
			}

			.v-star-score {
				margin-top: 2rpx;
				color: #d9d9d9;
				font-weight: bold;
			}
		}

		.img-video {
			margin-top: 20rpx;
		}

		.img-video .box {
			width: calc((84.6vw - 50rpx) / 3);
			height: calc((84.6vw - 50rpx) / 3);
			margin: 5rpx 40rpx 5rpx 5rpx;
			position: relative;

			justify-content: center;

			align-items: center;
		}

		.more_comment {
			border: 2rpx solid #afafaf;
			color: #646464;
			padding: 10rpx;
			width: 230rpx;
			border-radius: 45rpx;
			text-align: center;
		}

		.img-video .box .imhasass {
			width: calc((84.6vw - 50rpx) / 3);
			height: calc((84.6vw - 50rpx) / 3);
			margin: 5rpx 40rpx 5rpx 5rpx;
			position: relative;

			justify-content: center;

			align-items: center;
		}

		.v-reply {
			background: #f7f7f7;
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;

			text {
				font-size: 24rpx;
				font-weight: bold;
			}

			view {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #333;
			}
		}
	}

	.v-product-introduction {
		padding: 0rpx 26rpx 30rpx;

		view {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.v-padding-center {
		padding: 0 20rpx;
	}

	.v-flow-path {
		padding: 30rpx 0 50rpx;

		image {
			width: 666rpx;
			height: 138rpx;
		}
	}

	.v-bottom-av {
		margin: 10rpx 0;
	}
</style>